<template>
    <div>
        <p style="text-align:center">{{form.registerType==='THCC'?'提货小票':'进场小票'}}</p>
        <el-form :inline="true" label-position="right" :model="form" class="print-form" label-width="70px">
            <el-row class="mt-32">
                <el-col :span="9">
                    <el-form-item label="编号：">
                        {{form.ticketNo}}
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="操作人员：">
                        {{ form.createBy }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="操作时间：">
                        {{ form.createDateTime }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9">
                    <el-form-item label="箱号1：">
                        {{ form.container[0].containerNo }}
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="箱主：">
                        {{ form.container[0].ownerName }}
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="箱型：">
                        {{ form.container[0].containerType }}
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="空重：">
                        {{ form.container[0].ifHeavy | _filterIfHeavyType }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9">
                    <el-form-item label="委托单位：">
                        {{ form.container[0].entrustOrgName }}
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="车牌号：">
                        {{ form.plateNumber }}
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="货名：">
                        {{ form.container[0].cargoName }}
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="尺寸：">
                        {{ form.container[0].containerSize }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :class="form.container.length>1?'print-line':''">
                <el-col :span="9">
                    <el-form-item label="委托号：">
                        {{ form.container[0].entrustNo }}
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="目的场位：">
                        {{ form.container[0].containerPosition }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业机械：">
                        {{ form.container[0].machineName }}
                    </el-form-item>
                </el-col>
            </el-row>

            <div v-if="form.container.length>1">
                <el-row class="mt-32">
                    <el-col :span="9">
                        <el-form-item label="箱号2：">
                            {{ form.container[1].containerNo }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="箱主：">
                            {{ form.container[1].ownerName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="箱型：">
                            {{ form.container[1].containerType }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="空重：">
                            {{ form.container[1].ifHeavy | _filterIfHeavyType }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="委托单位：">
                            {{ form.container[1].entrustOrgName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="车牌号：">
                            {{ form.plateNumber }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="货名：">
                            {{ form.container[1].cargoName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="尺寸：">
                            {{ form.container[1].containerSize }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="委托号：">
                            {{ form.container[1].entrustNo }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="目的场位：">
                            {{ form.container[1].containerPosition }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="作业机械：">
                            {{ form.container[1].machineName }}
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
        <div class="mt-20">
            <div class="print-right">
                签字：_____________
            </div>
            <div class="print-right">
                签字：_____________
            </div>
        </div>
        <div class="mt-20 print-explain">
            <div>说明：</div>
            <div>1、外港汽车司机根据小票中目的场位以及作业机械提示，将汽车开往相应的场位。</div>
            <div>2、此小票仅作为场位指引，不作为提箱或集装箱进场的依据。</div>
            <div>3、外港汽车完成提箱或者集装箱进场作业后，将此小票交予指挥手。</div>
        </div>
    </div>
</template>
<script>
import { printTicket } from "@/api/middleControl/middleControl";
export default {
    data() {
        return {
            form: {}
        };
    },
    created() {
        this.loadData();
    },
    methods: {
        loadData() {
            let id = this.$route.query.id;
            if (id) {
                printTicket(id).then(res => {
                    this.form = res.data;
                    this.$nextTick(() => {
                        window.print();
                        window.close();
                    });
                });
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.print-line {
    border-bottom: 1px solid #000;
}
.print-right {
    text-align: right;
    margin-right: 20px;
    margin-top: 20px;
    font-size: 14px;
}
.print-explain {
    text-align: left;
    margin-left: 20px;
    font-size: 13px;
}

</style>